Various types of animation exist. Some animation involves change that occurs over time. For example, an animated graphic of a person may move across a computer screen over the course of a fifteen second period. Animation may also involve changing a property over time. For example, the color of a graphic may be animated to change over time so that every second the graphic's color changes to a different color over the course of a minute. Animation can also involve change that occurs in response to user input and other triggering events. For example, scroll-triggered animation involves change that occurs based scroll position. The scroll position changes based on user input or otherwise, for example, by a user scrolling up and down or right and left to display un-displayed portion of a document or webpage. As such scroll position changes occur the animation occurs. As a specific example, the horizontal position of a graphic of a car within a document may be animated to move from left to right as the document scrolls down. As the document is scrolled down one scroll unit, the car moves to the right one scroll unit.
Existing techniques for creating scroll-triggered animation on web pages and other documents have various deficiencies. Creating scroll-triggered animation of elements generally requires a developer to write code without being able to easily observe and test the scroll-based animation that is being created. For example, to animate an element on a scrolling web page, a developer may mentally calculate or otherwise envision the various positions an item will be located as it moves on a page. These various positions are then coded using a scripting language such as dHTML, CSS or JAVASCRIPT. Only after the code is executed are the results of the animation displayed for the developer to allow the developer to see how the animation works. If the animation of the element is not as it was intended while coding, the developer must edit and re-run the code again. This loop of code, execute, and view must be repeated until the element moves as desired. If more than one item is animated, the time spent coding and testing is greatly increased as the actions of each item in relation to each other must be calculated, coded and tested.